<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flexbox - 弹性盒子</title>
		<style type="text/css">
			.container {
				margin-top: 10px;
			}

			.container1 {
				display: flex;
			}

			.container2 {
				display: flex;
				/* 
					指定主轴的方向
					flex-direction: column;
					指定换行规则
					flex-wrap: wrap; 
				*/
				flex-flow: column wrap;
			}

			.container3 {
				display: flex;
				/* flex-direction: row;
				flex-wrap: wrap; */
				flex-flow: row wrap;
			}

			.container3 div:nth-child(1) {
				/* 
					flex item增长系数
					flex-grow: 2;
					flex item的收缩规则
					flex-shrink: 1;
					flex item在主轴方向上的初始大小
					flex-basis: 0%; 
				*/
				flex: 2;
			}

			.container3 div:nth-child(2) {
				/* flex-grow: 1;
				flex-shrink: 0.5;
				flex-basis: 0%; */
				flex: 1 .5;
			}

			.container3 div:nth-child(3) {
				/* flex-grow: 1;
				flex-shrink: 1;
				flex-basis: 100px; */
				flex: 1 100px;
			}
		</style>
	</head>
	<body>
		<div class="container container1">
			<div style="height: 100px; width: 100%; background-color: #8eb7cc;"></div>
			<div style="height: 100px; width: 100%; background-color: #bacc90;"></div>
			<div style="height: 100px; width: 100%; background-color: #cc90ba;"></div>
		</div>

		<div class="container container2">
			<div style="height: 100px; background-color: #8eb7cc;"></div>
			<div style="height: 100px; background-color: #bacc90;"></div>
		</div>

		<div class="container container3">
			<div style="height: 100px; background-color: #8eb7cc;"></div>
			<div style="height: 100px; background-color: #bacc90;"></div>
			<div style="height: 100px; background-color: #cc90ba;"></div>
		</div>
	</body>
</html>
